<template>
	<view class="wanl-money">
		<view class="bg-orange padding-bj top-header">
			<view class="title-box">
				<text class="title">余额冻结中(元)</text>
				<view class="margin-top margin-bottom-xs">
					<text class="money-title">{{data.money_freeze || 0}}</text>
				</view>
			</view>
			
			<view class="line"></view>
			
			<view class="title-box">
				<text class="title">可提现余额(元)</text>
				<view class="margin-top margin-bottom-xs">
					<text class="money-title">{{data.money || 0}}</text>
				</view>
			</view>
		</view>
		
		
		<view class="total-shouyi-box">
			<view class="margin-right-xl">今日收益<text class="margin-left-sm">¥{{data.today_money||0}}</text></view>
			<view>累计收益<text class="margin-left-sm">¥{{data.total_money||0}}</text></view>
		</view>
		
		<view class="flex align-center justify-between riqi-box">
			<view @click="opencalendar()">{{selectedDate || '选择日期查看收益'}}</view>
			<view>收益 ¥{{total_money||0}}</view>
			
			<uni-calendar 
			ref="calendar"
			:range="true"
			:showReturn="true" 
			:clear-date="true"
			:insert="false"
			:showMonth="false"
			@confirm="confirm" />
		</view>
		
		<!-- 功能 -->
		<view class="cu-list menu sm-border">
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/money/recharge')">
				<view class="content">
					<text class="wlIcon-chongzhichenggong text-blue"></text>
					<text>充值</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="showNotice()">
				<view class="content">
					<text class="wlIcon-tixianjilu text-orange"></text>
					<text>提现</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/new/transfer')">
				<view class="content">
					<text class="wlIcon-tixianjilu text-orange"></text>
					<text>余额互转</text>
				</view>
			</view>
		</view>
		
		<view class="cu-list menu sm-border">
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/bank/bank')">
				<view class="content">
					<text class="wlIcon-yinhangka text-blue"></text>
					<text>银行卡</text>
				</view>
				<view class="action">
					<text class="text-sm wanl-gray">用于提现到第三方账户</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/money/list')">
				<view class="content">
					<text class="wlIcon-yue1 text-orange"></text>
					<text>账单明细</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/user/money/witlist')">
				<view class="content">
					<text class="wlIcon-jinbitixian text-orange"></text>
					<text>提现日志</text>
				</view>
			</view>
		</view>
		
		
		<uniPopup ref="uniPopup">
			<view class="warp">
				<view class="modal-body">
					<view class="modal-box">
						<view class="flex align-center justify-center pb50">
							<view class="modal-title">提现公告</view>
							<image src="/static/images/close.png" class="close-image" @click="closeModel"></image>
						</view>
						
						<view class="modal-content">
							{{notice.notice_withdraw}}
						</view>
						
						<view class="modal-btn-box">
							<view @click="closeModel" class="modal-btn">知道了</view>
						</view>
						
					</view>
				</view>
			</view>
		</uniPopup>
		
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup';
import { mapState } from 'vuex';
export default {
	components: {
		uniPopup,
	},
	data() {
		return {
			data:{},
			selectedDate:'',
			today_money:0,
			total_money:0,
			notice:{},
		};
	},
	computed: {
		...mapState(['user'])
	},
	onLoad() {
		this.loadData();
		this.loadData2();
		this.getNotice();
	},
	methods: {
		async loadData() {
			await uni.request({
				url: '/wanlshop/pay/getBalance',
				method: 'POST',
				success: res => {
					this.$store.commit('user/setUserInfo', {money: res.data});
				}
			});
		},
		async loadData2() {
			await uni.request({
				url: '/user/wallet',
				method: 'POST',
				success: res => {
					res = res.res
					if(res.code == 1){
						this.data = res.data
					}
				}
			});
		},
		// 筛选日期pv
		confirm(data) {
			console.log(data);
			let start_date = '';
			let end_date = '';
			if(data.range.data.length === 1){
				start_date = data.range.data[0];
				end_date = start_date;
			}
			
			if(data.range.data.length > 1){
				start_date = data.range.data[0];
				end_date = data.range.data.pop();
			}
			
			this.selectedDate = start_date;
			if(end_date){
				this.selectedDate = start_date+"~"+end_date;
			}
			
			uni.request({
				url: '/user/datemoney',
				data: {
					start_date: start_date,
					end_date: end_date,
				},
				success: res => {
					res = res.res
					if (res.code === 1) {
						this.today_money = res.data.today_money;
						this.total_money = res.data.total_money;
					}
				}
			});
		},
		opencalendar(){
			this.$refs.calendar.open();
		},
		getNotice(){
			uni.request({
				url: '/index/index',
				method: 'GET',
				success: res => {
					res = res.res;
					if(res.code == 1){
						this.notice = res.data;
					}
				}
			});
		},
		showNotice(){
			if(this.notice.is_withdraw == 1){
				this.$refs.uniPopup.open();
			}else{
				this.$wanlshop.to('/pages/user/money/withdraw');
			}
		},
		closeModel(){
			this.$refs.uniPopup.close();
			this.$wanlshop.to('/pages/user/money/withdraw');
		},
	}
};
</script>

<style>
/deep/ .uni-calendar-item--checked {
	background-color: #fa436a !important;
	color: #ffffff !important;
}
</style>

<style scoped>
.wanl-money .title{
	color: rgba(255, 255, 255, .7);
}

.top-header{
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.money-title{
	font-size: 60rpx;
}

.title-box{
	text-align: center;
}

.line{
    width: 1px;
    height: 55px;
    background-color: hsla(0,0%,100%,.41);
}

.total-shouyi-box{
	display: flex;
	align-items: center;
	padding-left: 72rpx;
	font-size: 30rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #fff;
	line-height: 33rpx;
	background-color: #fe6600;
	padding-bottom: 20rpx;
	padding-top: 20rpx;
	margin-top: -2rpx;
}

.riqi-box{
	display: flex;
	align-items: center;
	padding-left: 72rpx;
	font-size: 30rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #fff;
	line-height: 33rpx;
	background-color: #fe6600;
	padding-bottom: 20rpx;
	padding-top: 20rpx;
	margin-top: -2rpx;
}

.cu-list.menu>.cu-item .content {
    font-size: 36rpx !important;
}

	.modal-body{
		width:650rpx;
		height: 550rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
	}
	
	.modal-middle-title{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 12rpx;
	}
	
	.modalImage{
		width: 698rpx;
		height: 204rpx;
	}
	
	.modal-box{
		position: absolute;
		top: 30rpx;
		left: 0rpx;
		width: 100%;
		padding-left: 28rpx;
		padding-right: 28rpx;
		padding-bottom: 28rpx;
	}
	
	.modal-title{
		font-size: 32rrpx;
		font-family: PingFang SC;
		font-weight: 700;
		color: #292929;
	}
	
	.modal-content{
		width: 600rpx;
		height: 320rpx;
		text-wrap: wrap;
		margin-top: 20rpx;
		overflow-y: auto;
		word-wrap: break-word;
	}
	
	.close-image{
		width: 42rpx;
		height: 42rpx;
		position: absolute;
		top: 0rpx;
		right: 28rpx;
	}
	
	.modal-btn-box{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}
	
	.modal-btn{
		width: 300rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
		background-color: #fe6600;
		color:white;
	}
</style>
